<template>
  <div class="course">
    <div class="menu">
      <!-- <div class="first" @click="backHome">返回首页</div> -->
    <!-- 按钮触发弹框显示 -->
    <div class="first" style="float: right;" 
    type="primary" @click="dialogVisible=true"> 加入班级</div>
      
    </div>

    <div class="body">
      <div class=" body-main">
        <div class="courseList" v-for="item in courses">
          <div class="row1">{{item.courseName}}</div>
          <div class="row2">{{item.startTime}}</div>
          <div class="row3">{{item.teacherName}}</div>
          <div class="row4">
            <img class="row4-img" @click="lookWork(item.id)" :src="item.imgUrl"/>
          </div>
        </div>
<!--加入班级 -->
    <el-dialog v-model="dialogVisible" title="加入班级" width="500">
      <el-form :model="joinForm">
        <el-form-item label="班级号:" prop="cclassNub">
          <el-input v-model="joinForm.cclassNub"></el-input>
        </el-form-item>
        <el-form-item label="密&emsp;码:" prop="password">
          <el-input type="password" v-model="joinForm.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="joinClass">确认加入</el-button>
        </span>
      </template>
    </el-dialog>
        </div>
      <div class="page">
        <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
      />
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import {getCourseListAPI} from '../../../api/student/course';
import {joinClassAPI} from '../../../api/student/course';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const router=useRouter()
const currentPage=ref(1)
const pageSize=ref(9)
const total=ref(2)
const courses=ref([
  // {id:1,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:2,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:3,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:4,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:5,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:6,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:4,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:5,courseName:'数据结构1',teacher:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:6,courseName:'数据结构1',teacher:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:5,courseName:'数据结构1',teacher:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  
])

const dialogVisible = ref(false);
const joinForm = ref({
  classNumber: '',
  password: ''
});

const joinClass = async() => {
  if(joinForm.value.classNumber==''&&joinForm.value.password==''){
    ElMessage.warning("输入框不能为空！")
  }else{
    console.log(`班级号: ${joinForm.value.cclassNub}, 密码: ${joinForm.value.password}`);
    // 这里添加将班级号和密码发送到服务器的代码 
    let params={
      cclassNub:joinForm.value.cclassNub,
      password:joinForm.value.password
    }
    const result=await joinClassAPI(params)
    // console.log("从后端获取到的班级信息",result)
    if(result.data.code==200){
      ElMessage.success("加入班级成功！")
      joinForm.value.cclassNub=''
      joinForm.value.password=''
      getCourseList()
      dialogVisible.value = false
    }else{
      ElMessage.warning("加入班级失败！")
    }
  }
}
const backHome=()=>{
  console.log("点击了返回首页")
}
const lookWork=(id)=>{
  console.log('点击了查看作业详情',id)
  router.push({
    path:'/st-home/studyPlace/work',
    query:{
      courseId:id
    }
  })
}
const getCourseList=async()=>{
  let params={
    pageNo:currentPage.value,
    pageSize:pageSize.value
  }
  const result=await getCourseListAPI(params)
  console.log("从后端获取到的课程列表",result)
  courses.value=result.data.data.list
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getStudentList()
}
onMounted(()=>{
  getCourseList()
})

</script>
<style scoped>

.course{
  height: 99%;
  width: 100%;
  padding-top: 1%;
  /* background-color: antiquewhite; */
  display: flex;
  /* flex-direction: column; */
}
.menu{
  height: 30%;
  width: 8%;
  background-color: rgb(255, 255, 255);
  position: fixed;
  border: 1.5px solid rgba(179, 179, 179, 0.158);
  border-radius:8px;
  float: left;
}
.first{
  width: 100%;
  height: 20%;
  /* background-color: aquamarine; */
  border-bottom: 1.5px solid rgba(179, 179, 179, 0.158);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* float: left; */
}
.first:hover{
  background-color: rgba(179, 179, 179, 0.158);
}
.body{
  width: 90.5%;
  height: 100%;
  margin-left: 1%;
  margin-left: 10.5%;
  display:flex;
  flex-direction: column;
  /* background-color:yellow; */
}
.body-main{
  height: 100%;
  width: 100%;
  /* background-color: red; */
  /* display: flex; */
  /* border: 1.5px solid rgba(77, 76, 76, 0.158); */
}
.courseList{
  width: 32%;
  height: 31%;
  float: left;
  margin-right:1%;
  margin-bottom:1%;
  border-radius:8px;
  box-shadow: var(--el-box-shadow-light);
}
.row1{
  height:13%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* border-bottom: 1.5px solid rgba(77, 76, 76, 0.158); */
}
.row2{
  height:8%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size:11px;
  color:#A8ABB2;
}
.row3{
  height:13%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size:14px;
  color:#A8ABB2;
  /* font-size:17px; */
}
.row4{
  height:66%;
  width:100%;
}
.row4-img{
  height:100%;
  width:100%;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
}
.page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 1%;
}

:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>